<!--vue模板-->
<template>
  <div>
    <!--基础信息-->
    <el-form
      ref="addForm"
      :model="customer"
      label-width="auto"
      :rules="rules"
      style="
        max-width:1000px;
        margin: auto;
        background-color: #fff;
        padding: 20px;
        border: 1px solid #ccc">
      <div
        style="background-color: #fff;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #ccc;
        margin-bottom: 10px">基础信息
      </div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="市场:">
            <el-select v-model="customer.market" placeholder="请选择 内销、外销">
              <el-option
                v-for="item in marketOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="国家:">
            <el-select v-model="customer.country" placeholder="请选择 ">
              <el-option
                v-for="item in countryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户公司名称 :" prop="company">
            <el-input v-model="customer.company" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机型 :">
            <el-input v-model="customer.model" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="成交或询价产品 :">
            <el-checkbox-group v-model="product">
              <el-checkbox label="配件" value="配件"/>
              <el-checkbox label="固定设备" value="固定设备"/>
              <el-checkbox label="移动设备" value="移动设备"/>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="感兴趣的产品 :">
            <el-input v-model="customer.interestProduct" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户联系人 :">
            <el-input v-model="customer.contactName" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户联系手机 :">
            <el-input v-model="customer.mobile" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户邮箱 :">
            <el-input v-model="customer.customer_email" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="老板联系人 :">
            <el-input v-model="customer.boss" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="老板联系手机 :">
            <el-input v-model="customer.boss_phone" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="老板邮箱 :">
            <el-input v-model="customer.boss_email" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系地址 :">
            <el-input v-model="customer.address" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户目的港口 :">
            <el-input v-model="customer.target_port" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户分类:">
            <el-select v-model="customer.product">
              <el-option
                v-for="item in customerCategory"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户类型:">
            <el-select v-model="customer.customer_type" placeholder="请选择 ">
              <el-option
                v-for="item in coustomerType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="公司简介 :" >
            <textarea rows="5" cols="150" style="border: 1px solid #ccc"></textarea>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户目的地 :">
            <el-input v-model="customer.destination" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="目的地和快递地址是否一致 :">
            <el-radio-group v-model="customer.isFit">
              <el-radio :label="1" value="1">一致</el-radio>
              <el-radio :label="0" value="0">不一致</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="快递地址 :">
            <el-input v-model="customer.destination" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
<!--    账号信息-->
    <el-form
        ref="addForm"
        :model="customer"
        :rules="rules"
        label-width="auto"
        style="
          max-width:1000px;
          margin: auto;
          margin-top: 10px;
          background-color: #fff;
          padding: 20px;
          border: 1px solid #ccc
        ">
      <div
        style="background-color: #fff;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #ccc;
        margin-bottom: 10px;">账号信息
      </div>
          <el-form-item label="归属销售 :">
            <el-select v-model="customer.saleId" placeholder="请选择 " class="ipt">
              <el-option
                v-for="item in countryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="账号 :" >
            <el-input v-model="customer.account" class="ipt" readonly/>
          </el-form-item>
          <el-form-item label="密码验证手机号 :">
            <el-input v-model="customer.validMobile" class="ipt"/>
          </el-form-item>
    </el-form>
    <div style="text-align: center;margin: 20px">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="info" @click="close">取消</el-button>
    </div>
  </div>
</template>

<!--vue组件选项定义-->
<script setup>
import { ref ,onBeforeMount} from "vue";
import {useRouter,useRoute} from "vue-router";
import {update,getDetail} from "@/api/customer.js";
import {ElMessage} from "element-plus";
import {queryCategory} from "@/api/category.js";
//路由实例
const  router =useRouter();
//路由信息
const route = useRoute();
//市场选项
const marketOptions = [
  {
    label: "内销",
    value: 1
  },
  {
    label: "外销",
    value: 2
  }
];

//客户类型
const coustomerType=[
  {
    label:"合作客户",
    value:1
  },
  {
    label:"潜在客户",
    value:2
  }
]
//客户分类
const customerCategory=ref([]);
//国家选项
const countryOptions = ref([]);
//表单引用 声明同名引用
const addForm=ref();
//成交或询价产品
const product=ref([]);

//表单对象
const customer = ref({
  account: "",
  address: "",
  boss: "",
  boss_email: "",
  boss_phone: "",
  cid: 0,
  company: "",
  company_profile: "",
  contactName: "",
  country: "",
  customer_email: "",
  customer_type: 1,
  destination: "",
  dourier_address: "",
  id: 0,
  interestPid: 0,
  interestProduct: "",
  isFit: 0,
  market: 1,
  mobile: "",
  model: "",
  password: "",
  product: "",
  saleId: 0,
  source: 0,
  target_port: "",
  validMobile: ""
});

//验证规则
const rules={
  company:[{ required: true, message: '请输入公司名称', trigger: 'blur' }]
}
//查询详情
async function queryDetail(id){
  let res = await getDetail(id);
  if(res.code==200){
    customer.value=res.data;
  }
}

//查询客户分类
async function queryCostomerCategory(){
  let rse = await queryCategory();
  if(rse.code==200){
    customerCategory.value=rse.data;
  }
}
//取消
function close(){
  router.push("/customer/list");
}

//保存
async function save(){
  let valid=addForm.value.validate(()=>{});
  if(!valid) return;
  customer.value.product=product.value.join(" ");
  console.log(customer.value);
  let res=await update(customer.value);
  if(res.code == 200){
    ElMessage({
      message:"修改成功",
      type:"success"
    });
    close();
  }
}
//生命周期
onBeforeMount(()=>{
  queryCostomerCategory();
  //获取客户id
  let id = route.query.id;
  queryDetail(id)
})
</script>

<!--vue样式 scoped 当前样式只适用于当前组件-->
<style scoped>
.ipt{
  width: 300px;
}
</style>
